/*
  选择器：
  * {}  通配符选择器
  ul li {}  后代选择器
  ul>li {}  子代选择器
  ul+li  {}  相邻兄弟选择器，仅下一个（上一个都不行）
  ul~li  {}  通用兄弟选择器，也是往下看
  .box {}  类选择器
  #box {}  id选择器
  div, p {}  逗号选择器
 */











/* 伪类选择器 */
.root {
  font-size: 29px;
  color: yellow;
}
.root:link {
  color: red;
}
.root:visited {
  color: green;
}
.root:hover {
  font-size: 50px;
  color: skyblue;
}
.root:active {
  color: rgb(30, 30, 28);
}

/* 上面四个全是a标签使用，仅有hover、active是可以给别的元素使用 */

/* 伪元素选择器 */

div {
  width: 400px;
  height: 100px;
}
div::first-letter {
  color: blue;
  font-size: 30px;
}
div::first-line {
  color: skyblue;
  font-size: 22px;
}
div::before {
  content: '我是before'
}
div::after {
  content: '我是after'
}
/* 鼠标选中效果 */
div::selection {
  color: blueviolet;
  background-color: brown;
}

/*  */

/* 属性选择器 */
[type] {
  width: 50px;
  height: 50px;
}
[name='sex'] {
  width: 25px;
  height: 25px;
}
[class~='box'] {
  background-color: aqua;
}
/* 只要命名为box2，或者以box2为开头都可以被找到 */
[class|='box2'] {
  background-color: green;
}
p.transform {
  text-transform: uppercase;
}
p.transform2 {
  text-transform: lowercase;
}
p.transform3 {
  text-transform: capitalize;
}
/* 
  text-align:justify ： 两端对齐(文本对齐方式)
  vertical-align:      元素的垂直对齐方式
  text-indent:2em  :  中文首行缩进两字符
  letter-spacing:5px      文字之间的间距
  line-height: 1.5em  行与行之间的高度，行高
  word-spacing:5px  单词之间的间距，仅英文

  white-space:nowrap  禁止换行，除非遇见br，否则不受宽度限制
  text-overflow:ellipsis  超出部分用省略号表示

  text-shadow: 5px 5px 5px red;  文本阴影，前两个值是x、y轴，第三个值是模糊度，第四个值是颜色

  text-decoration-line:overline  上划线   /   line-through  删除线   /   underline  下划线
  text-decoration-color: red  设置文本装饰的颜色
  text-decoration-style:  设置文本装饰的样式   solid 实线   /   double 双实线   /   dotted 点线   /   dashed 虚线   /wavy 波浪线
  text-decoration-thickness: 2px;  设置文本装饰的粗细( auto   px   %   )
  text-decoration: underline overline red dotted;  可以设置多个值，顺序为：下划线、上划线、颜色、样式
  text-decoration: none;  去除文本装饰

  font: 简写属性，顺序为：字号、字体、颜色
https://fontawesome.com/  图标库好用，使用i标签，定义class就OK，<i class="fas fa-camera-retro"></i>
ps.gaoding.com 在线版ps
*/

.wind-m {
  width: 200px;
  height: 200px;
  border: 2px solid gray;
}
.wind-m div{
  float: left;
  width: 0px;
  height: 0px;
  border: 50px solid transparent;
}

.wind-t {
  border-bottom: 50px solid red;
}
.wind-r {
  border-left: 50px solid red;
}
.wind-b {
  border-right: 50px solid red;
}
.wind-l {
  border-top: 50px solid red;
}


/* 
  background-img:url()  背景图片
  background-size:100% 100%  背景图片大小
  background-repeat:no-repeat  背景图片不重复
  background-position:top left  背景图片位置
  background-attachment:fixed  背景图片固定
*/